<template>
	<view class="box">
		<!-- 页面头部 -->
		<div class="head">
			<!-- 返回按钮 -->
			<img src="../../static/img/fanhui.png" alt="" class="return_botton">
			<!-- 页面标题 -->
			<p class="title">社团列标</p>
		</div>
		<!-- 占位 -->
		<div class="mark_one"></div>
		<!-- 搜索框 -->
		<div class="search_box">
			<div class="search">
				<img src="../../static/img/5.png" alt="" class="search_img">
				<p class="search_word">搜索你感兴趣的志愿社团</p>
			</div>
		</div>
		<div class="mark_tow"></div>
		<!-- 内容区 -->
		<div class="content">
			<!-- 社团头像 -->
			<img src="../../static/img/6.png" alt="" class="group_img"> 
			<!-- 社团名称 -->
			<p class="name">大学生志愿社</p>
			<!-- 社团人数图片 -->
			<img src="../../static/img/7.png" alt="" class="number_img">
			<!-- 社团人数 -->
			<p class="number">0</p>
		</div>
		<div class="content">
			<!-- 社团头像 -->
			<img src="../../static/img/6.png" alt="" class="group_img"> 
			<!-- 社团名称 -->
			<p class="name">大学生志愿社</p>
			<!-- 社团人数图片 -->
			<img src="../../static/img/7.png" alt="" class="number_img">
			<!-- 社团人数 -->
			<p class="number">0</p>
		</div>
	</view>
</template>

<script>
</script>

<style scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;
	}
	
	/* 页面头部  */
	.head{
	    position: fixed;
	    top: 0px;
	    left: 0px;
	    width: 100%;
	    height: 76rpx;
	    line-height: 76rpx;
	    background-color: white;
	    /* 高行高 76 */
	 
	}
	/* 返回按钮 */
	.return_botton{
	    float: left;
	    margin-top: 20rpx;   /* 20 */
		margin-left: 20rpx;
	    float: left;
	    width: 36rpx;   /* 36 */
	    height: 36rpx;/* 36 */
	
	}
	/* 页面标题 */
	.title{
	    float: left;
	    margin-left: 272rpx;    /* 272 */
	    font-size: 30rpx;   /* 30 */
	    font-weight: bold;
	    text-align: center;
	}
	.mark_one{
	    height: 96rpx;    /* 76 */
	}
	.mark_tow{
	    height: 79rpx;   /* 79 */
	}
	/* 搜索框 */
	.search_box{
	    position: fixed;
	    width: 100%;
	    height: 62rpx;  /* 62 */
	    background-color: white;
	 
	}
	.search{
	    margin: 0 auto;
	    width: 647rpx;  /* 347 */
	    height: 62rpx; /* 62 */
	    background-color: #EDEDED;
	    border-radius: 5px;   /* 9 */
	}
	.text{
	    float: left;
	    margin-left: 10px;
	    margin-top: px;
	    background-color:#EDEDED ;
	    width: 300px;
	    height: 25px;
	    border: 0px;
	}
	/* 放大镜 */
	.search_img{
	    float: left;
	    margin-top: 8px;   /* 14 */
	    margin-left: 11px;  /* 20 */
	    width: 36rpx;
	    height: 36rpx;
	    /* 36 */
	}
	/* 字 */
	.search_word{
	    float: left;
	    margin-top: 7px;   /* 13 */
	    margin-left: 16px;  /* 29 */
	    font-size: 25rpx;    /* 25 */
	    color:#CEDBDE;
	}
	/* 内容区 */
	.content{
	    margin: 0 auto;
	    margin-top: 10px;    /* 18 */
	    width: 701rpx;/* 701 */
	    height: 145rpx;   /* 145 */
	    background-color:white;
	    box-shadow: 10px 10px 30px 10px #F5F5F5;
	}
	/* 社团头像 */
	.group_img{
	    float: left;
	    margin-top: 9px;
	    margin-left: 9px;
	    /* 16 */
	    width: 109rpx;
	    height: 109rx;
	    /* 109 */
	}
	/* 社团名称 */
	.name{
	    float: left;
	    margin-top: 16rpx;
	    margin-left: 16rpx;
	        /* 16 */
	    font-size: 24rpx;
	    /* 24 */
	}
	/* 社团人数图片 */
	.number_img{
	    float: left;
	    margin-top: 87rpx;/* 87 */
	    margin-left: -140rpx;  /* -140 */
	    width: 36rpx;  /* 36 */
	    height: 36rpx;     /* 36 */
	}
	/* 社团人数 */
	.number{
	    float: left;
	    margin-top: 80rpx;  /* 86 */
	    margin-left: -91rpx; /* 91 */
	    color: gray;
	}
	
</style>
